<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>Vue-router</title>
	<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>  
</head>
<body>
<div id="app7">
    <h1>vue-router 重定向和别名</h1>
    <p>{{ message}}</p> 
       <router-link to="/a">路由重定向</router-link>
       <router-link to="/b">路由别名</router-link>
       
       <p>   <span style='color:red;'>『重定向』的意思是，当用户访问 /a时，URL 将会被替换成 /a/ddd，然后匹配路由为 /a/ddd</span></p>
      <p>   <span style='color:red;'>『别名』的意思是，/b 的别名是 /b/ddd，意味着，当用户访问/b/ddd 时，URL 会保持为/b/ddd，但是路由匹配则为 /b，就像用户访问 /b 一样。</span></p>
      
      
       <router-view></router-view>
        <router-view name='b'></router-view>
</div>
</body>
<script>
var luyou7 = new VueRouter({
	routes : [
	  {
		 path : '/a',
		 redirect: '/a/ddd'
			//  redirect: { name: 'cdx' } //重定向也可以是命名路由
	 },
	 {
		 path : '/a/ddd',
		 name : 'cdx',
		 components : {
			 default : {  //template里的内容还是/a路径里的 重定向后/b的路径访问不到
				 template : "<div> 不管在url里输入 '/a' 还是 '/a/ddd' url都改变成 '/a/ddd'这个路径 原因是我在'/a'这个路径做了重定向</div>"
			 }
		 }
	 },
	 {
		 path : '/b',
		 alias: '/b/ddd',
		 components : {
		 b : {  //template里的内容还是/a路径里的 重定向后/b的路径访问不到
			 template : "<div> url里输入 '/b/ddd'  时，URL 会保持为 '/b/ddd'，但是路由匹配则为 '/b'，就像访问' /b'一样。</div>"
		 }
	    }
	 }
	 ]
	
	
});


new Vue({
	el : "#app7", 
	router : luyou7,
	data : {
		message  : "路由重定向和别名"
	}
	
});

</script>
</html>